<template>
  <el-dialog
    v-model="openDialog"
    :fullscreen="isFullscreen"
    :draggable="!isFullscreen"
    append-to-body
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">This is a custom header!</h4>
        <el-button type="danger" @click="close">
          <el-icon class="el-icon--left"><Close /></el-icon>
          Close
        </el-button>
      </div>
    </template>

    <template #content>
      <span>It's a draggable Dialog</span>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="openDialog = false">Cancel</el-button>
        <el-button type="primary" @click="openDialog = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { Close } from "@element-plus/icons-vue";
// 是否是全屏
const isFullscreen = ref(false);

const emit = defineEmits(["update:openDialog"]);
const openDialog = defineModel();
openDialog.value = false;

// defineProps({
//   openDialog: {
//     type: Boolean,
//     default: false,
//   },
// });
</script>
